{include file='public/header'/}
<!-- 样式 -->
{block name='style'}{/block}
<div style="padding: 15px;margin: 15px;background-color: #fff;">
    <!-- 表单 -->
    {block name='form'}
    <form class="layui-form" action="">
        <!-- 表单头部 -->
        {block name='head'}{/block}
        <!-- 表单字段 -->
        {block name='fields'}
        <!-- 输入框 -->
        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-block">
                <input type="text" name="title" value="" required lay-verify="required" placeholder="请输入"
                    class="layui-input">
            </div>
        </div>
        <!-- 密码框 -->
        <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
                <input type="password" name="password" value="" required lay-verify="required" placeholder="请输入"
                    class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助文字</div>
        </div>
        <!-- 选择框 -->
        <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-inline">
                <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                </select>
            </div>
        </div>
        <!-- 复选框 -->
        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" name="like[]" value="write" title="写作" lay-skin="primary">
                <input type="checkbox" name="like[]" value="read" title="阅读" lay-skin="primary" checked>
                <input type="checkbox" name="like[]" value="dai" title="发呆" lay-skin="primary">
            </div>
        </div>
        <!-- 开关 -->
        <div class="layui-form-item">
            <label class="layui-form-label">开关</label>
            <div class="layui-input-block">
                <input type="hidden" name="switch" value="0">
                <input type="checkbox" name="switch" value="1" lay-skin="switch" lay-text="ON|OFF">
            </div>
        </div>
        <!-- 单选框 -->
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男">
                <input type="radio" name="sex" value="女" title="女" checked>
            </div>
        </div>
        <!-- 上传框 -->
        <div class="layui-form-item">
            <label class="layui-form-label">上传</label>
            <div class="layui-input-inline">
                <input type="url" name="upload" placeholder="选择文件" class="layui-input upload">
            </div>
        </div>
        <!-- 文本域 -->
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
                <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <!-- 富文本 -->
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">富文本</label>
            <div class="layui-input-block">
                <textarea name="editor" placeholder="请输入内容" class="layui-textarea editor"></textarea>
            </div>
        </div>
        <!-- wangeditor富文本 -->
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">wangeditor</label>
            <div class="layui-input-block">
                <textarea name="wangeditor" placeholder="请输入内容" class="layui-textarea weditor"></textarea>
            </div>
        </div>
        <!-- 手机邮箱 -->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">手机</label>
                <div class="layui-input-inline">
                    <input type="tel" name="phone" lay-verify="required|phone" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" name="email" lay-verify="email" class="layui-input">
                </div>
            </div>
        </div>
        <!-- 日期 -->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="date" lay-verify="date" placeholder="yyyy-MM-dd" class="layui-input date">
                </div>
            </div>
        </div>
        <!-- 颜色 -->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">颜色</label>
                <div class="layui-input-inline">
                    <input type="text" name="color" placeholder="请选择颜色" class="layui-input color">
                </div>
            </div>
        </div>
        <!-- 范围 -->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">范围</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <!-- 分组选择框 -->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">分组选择框</label>
                <div class="layui-input-inline">
                    <select name="quiz">
                        <option value="">请选择问题</option>
                        <optgroup label="城市记忆">
                            <option value="你工作的第一个城市">你工作的第一个城市</option>
                        </optgroup>
                        <optgroup label="学生时代">
                            <option value="你的工号">你的工号</option>
                            <option value="你最喜欢的老师">你最喜欢的老师</option>
                        </optgroup>
                    </select>
                </div>
            </div>
        </div>
        <!-- 搜索选择框 -->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">搜索选择框</label>
                <div class="layui-input-inline">
                    <select name="modules" lay-verify="required" lay-search="">
                        <option value="">直接选择或搜索选择</option>
                        <option value="1">layer</option>
                        <option value="2">form</option>
                        <option value="3">layim</option>
                        <option value="4">element</option>
                        <option value="5">laytpl</option>
                        <option value="6">upload</option>
                        <option value="7">laydate</option>
                        <option value="8">laypage</option>
                        <option value="9">flow</option>
                        <option value="10">util</option>
                        <option value="11">code</option>
                        <option value="12">tree</option>
                        <option value="13">layedit</option>
                        <option value="14">nav</option>
                        <option value="15">tab</option>
                        <option value="16">table</option>
                        <option value="17">select</option>
                        <option value="18">checkbox</option>
                        <option value="19">switch</option>
                        <option value="20">radio</option>
                    </select>
                </div>
            </div>
        </div>
        {/block}
        <!-- 表单提交 -->
        {block name='submit'}
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        {/block}
    </form>
    {/block}
</div>
<!-- js -->
{block name='js'}{/block}
<script>
    layui.use(['form', 'upload', 'layedit', 'laydate', 'colorpicker', 'tree'], function () {
        var form = layui.form
            , upload = layui.upload
            , layedit = layui.layedit
            , laydate = layui.laydate
            , colorpicker = layui.colorpicker
            , tree = layui.tree
            , $ = layui.jquery;

        //获取应用、控制器和方法
        var module = '{:app("http")->getName()}'
            , controller = '{$Request.controller}'
            , action = '{$Request.action}';

        // 日期
        $('form .date').each(function () {
            laydate.render({
                elem: 'input[name="' + $(this).attr('name') + '"]',
                type: $(this).data('type') || 'date'
            });
        });

        // 颜色
        $('form .color').each(function () {
            var input_id = $(this).attr('name');
            $(this).parent().parent().append('<div class="layui-inline" style="left: -11px;"><div id="' + input_id + '-render"></div></div>');
            colorpicker.render({
                elem: '#' + input_id + '-render',
                done: function (color) {
                    $('input[name="' + input_id + '"]').val(color);
                }
            });
        });

        // 上传
        $('form .upload').each(function () {
            var input_id = $(this).attr('name');
            $(this).parent().append('<div class="layui-upload-list" style="position:relative;"></div>');
            $(this).parent().parent().append('<button type="button" class="layui-btn layui-btn-primary" id="' + input_id + '-render"><i class="layui-icon layui-icon-upload"></i> 上传</button>');
            if (/\.(gif|jpg|jpeg|png|bmp|webp|psd|svg|tiff)$/gi.test($(this).val())) {
                $(this).parent().find('.layui-upload-list').html('<i class="layui-icon layui-icon-close-fill" style="position:absolute;bottom:-10px;left:-10px;opacity:0.8;cursor:pointer;"></i><img src="' + $(this).val() + '" alt="Preview" style="max-width:92px" onerror="this.parentNode.innerHTML=\'404 Error\'" />');
            }
            upload.render({
                elem: '#' + input_id + '-render',
                url: '/' + module + '/files/upload',
                data: {},
                before: function (obj) {
                    layer.load();
                },
                done: function (res, index, upload) {
                    layer.closeAll('loading');
                    if (res.code > 0) return layer.msg('上传失败');
                    //上传成功
                    $(this.item).prev().find('input[name="' + input_id + '"]').val(res.data.src)
                    if (/\.(gif|jpg|jpeg|png|bmp|webp|psd|svg|tiff)$/gi.test(res.data.src)) {
                        $(this.item).prev().find('.layui-upload-list').html('<i class="layui-icon layui-icon-close-fill" style="position:absolute;bottom:-10px;left:-10px;opacity:0.8;cursor:pointer;"></i><img src="' + res.data.src + '" alt="Preview" style="max-width:92px" onerror="this.parentNode.innerHTML=\'404 Error\'" />');
                    }
                },
                error: function (index, upload) {
                    layer.closeAll('loading');
                }
            });
        });
        $('form .upload').change(function(){
            if (/\.(gif|jpg|jpeg|png|bmp|webp|psd|svg|tiff)$/gi.test($(this).val())) {
                $(this).parent().find('.layui-upload-list').html('<i class="layui-icon layui-icon-close-fill" style="position:absolute;bottom:-10px;left:-10px;opacity:0.8;cursor:pointer;"></i><img src="' + $(this).val() + '" alt="Preview" style="max-width:92px" onerror="this.parentNode.innerHTML=\'404 Error\'" />');
            } else {
                $(this).parent().find('.layui-upload-list').html(null);
            }
        });
        $('form .layui-upload-list').on('click', '.layui-icon-close-fill', function(){
            $(this).parent().prev().val(null);
            $(this).parent().html(null);
        });

        // layedit富文本
        var editors = [];
        layedit.set({
            uploadImage: {
                url: '/' + module + '/file/upload', //接口url
                type: 'post', //默认post
            }
        });
        $('form .editor').each(function () {
            var editor_id = $(this).attr('name');
            $(this).attr('id', editor_id);
            $(this).attr('lay-verify', editor_id);
            editors[editor_id] = layedit.build(editor_id, {
                tool: [
                    'strong', //加粗
                    'italic', //斜体
                    'underline', //下划线
                    'del', //删除线
                    '|', //分割线
                    'left', //左对齐
                    'center', //居中对齐
                    'right', //右对齐
                    '|', //分割线
                    'link', //超链接
                    'unlink', //清除链接
                    'image', //插入图片
                ]
            });
        });

        // wangeditor富文本
        var weditors = [];
        window.wangEditor && $('form .weditor').each(function () {
            var weditor = window.wangEditor;
            var editor_id = $(this).attr('name');
            $(this).attr('id', editor_id).addClass('layui-hide');
            $(this).parent().prepend('<div id="' + editor_id + '"></div>');
            weditors[editor_id] = new weditor(document.getElementById(editor_id));
            weditors[editor_id].config.uploadImgServer = '/' + module + '/files/wangeditor_upload'; //接口url
            weditors[editor_id].config.onchange = function (html) {
                $('#' + editor_id).parent().find('textarea[name="' + editor_id + '"]').val(html)
            }
            weditors[editor_id].create();
            weditors[editor_id].txt.html($('#' + editor_id).parent().find('textarea[name="' + editor_id + '"]').val())
        });

        // 监听提交
        form.on('submit(submit)', function (data) {
            for (var editor in editors) {
                data.field[editor] = layedit.getContent(editors[editor]);
            }
            $.post('/' + module + '/' + controller + '/' + (action == 'add' ? 'save' : 'save_' + action), data.field, function (res) {
                if (res.code) return layer.alert(res.msg, { icon: 2 });
                layer.alert(res.msg, { icon: 1 });
                setTimeout(function () {
                    var current = window, parentIndex = parent.layer.getFrameIndex(window.name);
                    if (typeof parentIndex !== 'undefined') {
                        parent.layer.close(parentIndex);
                        current = parent.window;
                    }
                    if (typeof res.url !== 'undefined' && res.url) {
                        current.location.href = res.url;
                    } else {
                        if (typeof current.layui.table !== 'undefined' && current.layui.table.index == 1) {
                            current.layui.table.reload('dataTable');
                        } else {
                            current.location.reload();
                        }
                    }
                }, 1000);
            }, 'json');
            return false;
        });

    });
</script>
{include file='public/footer'/}